<template>
    <div class="msg-detail">
        <div class="header">
            <p>人才信息</p>
            <el-button class="link" type="primary">
                <router-link to="/talentOutList" style="color: #fff;">返回</router-link>
            </el-button>
        </div>
        <div class="main">
            <div class="table-wrap">
                <div class="header-wrap">基本信息</div>
                <div class="wrap-menu">
                    <div class="flex-box-container">
                        <div class="menu-list flex">
                            <div class="menu-name">姓名</div>
                            <div class="menu-info">{{info.name}}</div>
                        </div>
                        <div class="menu-list flex" style="border-left: 1px solid #dedede;">
                            <div class="menu-name">性别</div>
                            <div class="menu-info" v-if="info.sex == 'female'">女性</div>
                            <div class="menu-info" v-else-if="info.sex == 'male'">男性</div>
                            <div class="menu-info" v-else>未知</div>
                        </div>
                    </div>
                    <div class="flex-box-container">
                        <div class="menu-list flex">
                            <div class="menu-name">经验</div>
                            <div class="menu-info">{{info.workyears}}</div>
                        </div>
                        <div class="menu-list flex" style="border-left: 1px solid #dedede;">
                            <div class="menu-name">联系电话</div>
                            <div class="menu-info">{{info.mobile}}</div>
                        </div>
                    </div>
                    <div class="flex-box-container">
                        <div class="menu-list flex">
                            <div class="menu-name">学历</div>
                            <div class="menu-info">{{info.degreeText}}</div>
                        </div>
                        <div class="menu-list flex" style="border-left: 1px solid #dedede;">
                            <div class="menu-name">所属分类</div>
                            <div class="menu-info">{{info.category}}</div>
                        </div>
                    </div>
                    <div class="flex-box-container">
                        <div class="menu-list flex">
                            <div class="menu-name">来源学校</div>
                            <div class="menu-info">{{info.fromSchool}}</div>
                        </div>
                        <div class="menu-list flex" style="border-left: 1px solid #dedede;">
                            <div class="menu-name">来源班级</div>
                            <div class="menu-info">{{info.fromClass}}</div>
                        </div>
                    </div>
                    <div class="flex-box-container">
                        <div class="menu-list flex">
                            <div class="menu-name">月薪</div>
                            <div class="menu-info">{{info.salary}}</div>
                        </div>
                        <div class="menu-list flex" style="border-left: 1px solid #dedede;">
                            <div class="menu-name">录入时间</div>
                            <div class="menu-info">{{info.gmtCreated}}</div>
                        </div>
                    </div>
                    <div class="flex-box-container">
                        <div class="menu-list flex">
                            <div class="menu-name">来源国家</div>
                            <div class="menu-info">{{info.country}}</div>
                        </div>
                        <div class="menu-list flex" style="border-left: 1px solid #dedede;">
                            <div class="menu-name">诚意金</div>
                            <div class="menu-info">{{info.earnest}}</div>
                        </div>
                    </div>
                    <div class="flex-box-container">
                        <div class="menu-list flex">
                            <div class="menu-name">推荐费</div>
                            <div class="menu-info">{{info.referral}}</div>
                        </div>
                        <div class="menu-list flex" style="border-left: 1px solid #dedede;">
                            <div class="menu-name"></div>
                            <div class="menu-info"></div>
                        </div>
                    </div>
                    <div class="menu-list">
                        <div class="menu-name">简历</div>
                        <div class="menu-info">
                            <div v-html="info.resume">
                                {{info.resume}}
                            </div>
                        </div>
                    </div>
                    <div class="menu-list">
                        <div class="menu-name">视频</div>
                        <div class="menu-info">
                            <video src="info.video" v-if="info.video"></video>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    let CONSTANT = require('../../constant/constant.js');
    let common = require("../../common.js");
    export default {
        data() {
            return {
                id:'',
                info:{},
            }
        },
        created() {
            this.id = this.$router.currentRoute.query.id;
            this.getDetail();
        },
        methods: {
            getDetail:function(){
                let url = CONSTANT.URL.TALENT.DETAIL,
                    data={
                        id:this.id
                    }
                common.requestAjax(url,{},data,(res)=>{
                    if(res.status == 200){
                        let data = res.data;
                        this.info = data.bussData
                    }
                })
            },
        }
    }
</script>

<style lang="scss" scoped>
    .msg-detail {
        .header{
            height: 36px;
            padding-bottom: 10px;
            border-bottom: 1px solid #ddd;
            p{ float: left;height: 36px;line-height: 36px;margin: 0 0 0 10px;font-size: 18px;}
            .el-button{
                float: right;
            }
        }
        .main{
            margin-left: 5%;
            .table-wrap{
                width: 80%;
                margin-top: 30px;
                .header-wrap{
                    height: 50px;
                    line-height: 50px;
                    font-size: 14px;
                    border: 1px solid #dedede;
                    padding-left: 50px;
                    background-color: #f5f5f5;
                    color: #000;
                    font-weight: bold;
                }
                .wrap-menu{
                    border-right: 1px solid #dedede;
                    border-left: 1px solid #dedede;
                    .menu-list{
                        border-bottom: 1px solid #dedede;
                        display: -webkit-box;
                        display: box;
                        display: -moz-box;
                        /* 老版本 - 适配iOS 6-, Safari 3.1-6 */
                        display: -webkit-flex;
                        /* 新版本 - 适配Chrome */
                        display: flex;
                        /*-webkit-box-align: center;*/
                        /*-moz-align-items: center;*/
                        /*-webkit-align-items: center;*/
                        /*align-items: center;*/
                        min-height: 80px;
                        font-size: 14px;
                        cursor: pointer;
                        &:hover{
                            background-color: #f5f7fa;
                        }
                        .menu-name{
                            display: -webkit-box;
                            display: box;
                            display: -moz-box;
                            /* 老版本 - 适配iOS 6-, Safari 3.1-6 */
                            display: -webkit-flex;
                            /* 新版本 - 适配Chrome */
                            display: flex;
                            -webkit-box-align: center;
                            -moz-align-items: center;
                            -webkit-align-items: center;
                            align-items: center;
                            -webkit-box-justify-content:  center;
                            -moz-align-justify-content:  center;
                            -webkit-align-justify-content:  center;
                            justify-content:  center;
                            flex: 1;
                            -webkit-flex: 1;
                            text-align: right;
                            min-height: 80px;
                            border-right: 1px solid #dedede;
                            color: #909399;
                            /*padding: 10px  30px 10px 0;*/
                        }
                        .menu-info{
                            display: -webkit-box;
                            display: box;
                            display: -moz-box;
                            /* 老版本 - 适配iOS 6-, Safari 3.1-6 */
                            display: -webkit-flex;
                            /* 新版本 - 适配Chrome */
                            display: flex;
                            -webkit-box-align: center;
                            -moz-align-items: center;
                            -webkit-align-items: center;
                            align-items: center;
                            -webkit-box-justify-content:  center;
                            -moz-align-justify-content:  center;
                            -webkit-align-justify-content:  center;
                            justify-content:  center;
                            min-height: 80px;
                            flex: 3;
                            -webkit-flex: 3;
                            /*padding: 10px  0px 10px 30px;;*/
                            .image-info{
                                width: 80px;
                                cursor: pointer;
                                height: 40px;
                                margin-right: 10px;
                            }
                            .avatar{
                                width: 80px;
                                height: 80px;
                                border-radius: 50%;
                                -webkit-border-radius: 50%;
                            }
                        }
                    }
                }
            }
        }
    }
</style>
